Many Floats

intro

Developers realized that something interesting happens with multiple floats on the page. While floats ignore block elements, they respect the boundaries of other float elements.

Here is a website with multiple float: left and float: right elements.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Floats Left and Right</title>
  <style>
    @font-face {
      font-family: 'Menlo Regular';
      font-style: normal;
      font-weight: normal;
      src: local('Menlo Regular'), url('fonts/Menlo-Regular.woff');
    }
    * {
      box-sizing: border-box;
      font-family: 'Menlo Regular', monospace;
      font-weight: bold;
    }
    div {
      font-size: 44pt;
      border: 6px solid #2e3d49;
      width: 5em;
      text-align: center;
    }
    .left {
      float: left;
    }
    .right {
      float: right;
    }
    .green {
      background-color: #89D698;
    }
    .blue {
      background-color: #89D0E5;
    }
  </style>
</head>
<body>
  <div class="left 1 green">.left.1</div>
  <div class="right 2 blue">.right.2</div>
  <div class="left 3 green">.left.3</div>
  <div class="right 4 blue">.right.4</div>
</body>
</html>

Here's how the site looks.

asdf

Lefts stack on the left, rights stack on the right.

fdsa

Notice how the floats stack on one another in the order that they appear in HTML. This animation gives you an idea of how the elements end up where they do.

Floats Left and Right

INSTRUCTOR NOTE:

See how the floats slide into place and respect each other's boundaries!

Regardless of float: left or float: right, all floats respect each other's space. Try widening the floats in the previous example (bump up the width of div) and you'll see that once floats push against each other, they wrap to the next line. Here's an example that demonstrates just that.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Floats Left and Right</title>
  <style>
    @font-face {
      font-family: 'Menlo Regular';
      font-style: normal;
      font-weight: normal;
      src: local('Menlo Regular'), url('fonts/Menlo-Regular.woff');
    }
    * {
      box-sizing: border-box;
      font-family: 'Menlo Regular', monospace;
      font-weight: bold;
    }
    div {
      font-size: 44pt;
      border: 6px solid #2e3d49;
      width: 5em;
      text-align: center;
    }
    .left {
      float: left;
    }
    .green {
      background-color: #89D698;
    }
    .blue {
      background-color: #89D0E5;
    }
  </style>
</head>
<body>
  <div class="left green">.left</div>
  <div class="left blue">.left</div>
  <div class="left green">.left</div>
  <div class="left blue">.left</div>
  <div class="left green">.left</div>
  <div class="left blue">.left</div>
  <div class="left green">.left</div>
  <div class="left blue">.left</div>
  <div class="left green">.left</div>
  <div class="left blue">.left</div>
  <div class="left green">.left</div>
  <div class="left blue">.left</div>
  <div class="left green">.left</div>
  <div class="left blue">.left</div>
  <div class="left green">.left</div>
  <div class="left blue">.left</div>
</body>
</html>

This example probably looks much like you expected.

lots of lefts

outro

Now that you've seen the basic concepts, on the next page you'll be experimenting with floats inside parents.

Next Concept